<template>
	<div class="app-header-box">
		<div class="app-header-box_col">
			<el-avatar> user </el-avatar>
		</div>
		<div class="app-header-box_col" @click="projectAllShow">
			<img src="../assets/images/daoru.png" />
			项目
		</div>
		<!-- <div class="app-header-box_col" @click="importProject">
			<img src="../assets/images/daoru.png" />
			导入
		</div> -->
		<!-- <div class="app-header-box_col">
			<img src="../assets/images/moniqi.png" />
			模拟器
		</div> -->
		<!-- <div class="app-header-box_col">
			<el-cascader v-model="deviceInfo.value" :options="deviceInfo.options" placeholder="设备信息" style="width:150px;" @change="handleChange" />
		</div>
		<div class="app-header-box_col">
			<img src="../assets/images/moniqi.png" />
			刷新
		</div>
		<div class="app-header-box_col">
			<el-select v-model="compilationOptions.value" placeholder="普通编译" style="width: 180px">
				<template #header>
					<el-input v-model="compilationOptions.keyword" class="option-input" placeholder="请输入关键词搜索" />
				</template>

<el-option v-for="item in compilationOptions.list" :key="item.value" :label="item.label" :value="item.value" />

<template #footer>
					<el-button text bg size="small">添加编译模式</el-button>
				</template>
</el-select>
</div> -->
		<div class="app-header-box_col" @click="startCompile">
			<img src="../assets/images/bianyi.png" />
			编译
		</div>
		<!-- 预览打开一个新的窗口 -->
		<!-- 
		<div class="app-header-box_col">
			<img src="../assets/images/qinghuancun.png" />
			预览
		</div>
		<div class="app-header-box_col">
			<img src="../assets/images/qinghuancun.png" />
			清缓存
		</div> -->

		<div class="app-header-box_col" v-loading="updateInfo.loading" @click="uploadFile">
			<img src="../assets/images/shangchuan.png" />
			上传
		</div>

		<!-- <div class="app-header-box_col">
			<img src="../assets/images/xiangqing.png" />
			详情
		</div> -->

		<div class="app-header-box_col" @click="openExplorer">
			<img src="../assets/images/xiangqing.png" />
			资源管理器
		</div>

		<div class="app-header-box_col" @click="openDocument">
			<img src="../assets/images/xiangqing.png" />
			文档
		</div>

	</div>

	<!-- 上传提示 -->
	<el-dialog v-model="updateInfo.visible" title="" width="500">
		<span>上次提交已被选为体验版，本次上传将会覆盖体验版，是否继续？</span>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="updateInfo.visible = false">取消</el-button>
				<el-button type="primary" @click="confirmUploadFile">确定</el-button>
			</div>
		</template>
	</el-dialog>

</template>
<script setup lang="ts">

import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import config from '../mp.config.js'
import { readProjectPathInfo } from '../utils';
import build from '../compile/commanders/build';
import { commitsource } from '../compile/publist';


//========= start 小程序引入模块 ====================//
// import '../assets/mini_program/main.css'
import { Device } from '../mini_program/core/device/device.js'
import { Application } from '../mini_program/core/application';
import { AppManager } from "../mini_program/core/appManager";
//========= end 小程序引入模块 ====================//

// emit
//获取当前组件实例，然后通过 proxy 属性访问 $bus
// const { proxy } = getCurrentInstance();
const emit = defineEmits(['change']);

const store = useStore();

/* //设备信息
const deviceInfo = {
	value: '',
	options: [
		{
			label: '显示比例', value: 'displayScale',
			children: [
				{ value: '100', label: '100%', },
				{ value: '85', label: '85%', },
				{ value: '75', label: '75%', },
				{ value: '50', label: '50%', },
			],
		},
		{
			label: '字体大小', value: 'fontSize',
			children: [
				{ value: '15', label: '15', },
				{ value: '16', label: '16', },
				{ value: '17', label: '17', },
				{ value: '18', label: '18', },
				{ value: '19', label: '19', },
				{ value: '23', label: '23', },
			],
		}
	],
};
//编译选项
const compilationOptions = ref({
	value: '',
	list: [
		{
			value: '普通编译',
			label: '普通编译',
		},
		{
			value: 'Shanghai',
			label: 'Shanghai',
		},
	],
	keyword: '',
}); */



//编译状态
const compileStatus=ref(false);

const updateInfo = ref({
	visible:false,
	loading: false
})


onMounted(() => {





})

const projectAllShow = () => {
	// $bus.emit('msg', {type: 'displayWelcome',data:{}});
	emit('change',{type:'project',data:{}});
}

/* //导入
const importProject = () => {

	window.electron.ipcRenderer.send('open-import-project-window');

	window.electron.ipcRenderer.on('get-import-project-info', (_event, item) => {
		let res = JSON.parse(item);
		if (!res.canceled) {

			//保存项目路径信息
			let projectInfo=saveProjectPathInfo('project.config.json', res.filePaths[0]);
			if(!projectInfo){
				ElMessage({
					message: '保存项目失败',
					type: 'error',
				});
				return false;
			}

			//发送消息给Welcome.vue组件，通知项目路径已更改
  			$bus.emit('editProjectPath', {type: 'editProjectPath', filePath: res.filePaths[0]});
		}
	});

} */

//编译
const startCompile = () => {

	console.log("compileStatus:1",compileStatus.value)
	if(compileStatus.value){
		ElMessage({
			message: '编译中，请稍后',
			type: 'error',
		});
		return;
	}

	compileStatus.value=true;

	console.log("compileStatus:2",compileStatus.value);
	/* proxy.$bus.emit('mitt-message', {type: 'recompileProject', data: {}});

	return false; */

	
	// build("D:\\web_project\\raymond-app-dev-tool\\apps\\douyin");
	build({publishPath:store.state.projectInfo.path,publish:true},async ()=>{
		
		//打开小程序
		
		//读取小程序项目中的配置信息
		const projectConfigInfo =await readProjectPathInfo(store.state.projectInfo.path+"/project.config.json");
		
		//读取app.js中的配置信息
		const appConfigInfo =await readProjectPathInfo(store.state.projectInfo.path+"/app.json");
		const appInfo = {appId:projectConfigInfo.appid,path:appConfigInfo.pages[0]};
		
		/* let element=document.getElementById('abb');
		console.log("element",element)
		element.innerHTML=""; */

		const dev = new Device();
		
		const wx = new Application();

		dev.open(wx);

		AppManager.openApp({
			appId: appInfo.appId,
			path: appInfo.path,
			scene: 1001,
			currProjectPath:store.state.projectInfo.path+'/dist',
			windowWidth: store.state.projectInfo.windowWidth,
			windowHeight: store.state.projectInfo.windowHeight,
		}, wx);

		/* // 当整个页面（包括所有资源）加载完成时执行
		window.addEventListener('load', function () {
			// 这里的代码会在所有资源（图片、样式表等）加载完成后执行
			console.log('Page is fully loaded!');
			// 你可以在这里执行依赖于所有资源都加载完成的操作
			compileStatus.value=false;
			console.log("compileStatus:3",compileStatus.value);
		}); */
		setTimeout(() => {
			compileStatus.value=false;
		},1000)
		// compileStatus.value=false;
	})
	/* ElMessage({
		message: '编译成功',
		type: 'success',
	}) */

}

//上传
const uploadFile = () => {
	/* const {filePath,fileName}=commitsource(store.state.projectInfo.path)
	window.electron.ipcRenderer.send('upload-file', {filePath,fileName,entryPath:store.state.projectInfo.entryPath}); */
	/* ElMessage({
		message: '上传成功',
		type: 'success',
	}) */
	updateInfo.value.visible = true
}

//确认上传
const confirmUploadFile = async () => {
	
	build({publishPath:store.state.projectInfo.path,publish:true},async ()=>{

		const { filePath, fileName } = commitsource(store.state.projectInfo.path)
		window.electron.ipcRenderer.send('upload-file', {
			url:config.route.commitsource,
			filePath, 
			fileName,
			appId:store.state.projectInfo.appId,
			windowWidth:store.state.projectInfo.windowWidth,
			windowHeight:store.state.projectInfo.windowHeight,
			entryPath:store.state.projectInfo.entryPath
		});
	
		updateInfo.value.visible = false;
		updateInfo.value.loading = true;
		/* setTimeout(() => {
			updateInfo.value.loading = false;
		}, 1000) */
		window.electron.ipcRenderer.on('upload-file-done', (_event, item) => {
			updateInfo.value.loading = false
			console.log('upload-file:', item)
		});
		//监听失败
		window.electron.ipcRenderer.on('upload-file-err', (_event, error) => {
			updateInfo.value.loading = false
			console.log('upload-file:', error)
		});
	})
}
//打开资源管理器
const openExplorer = () => {

	window.electron.ipcRenderer.send('open-explorer', { projectPath:store.state.projectInfo.path });

}
//打开资源管理器
const openDocument = () => {

	window.electron.ipcRenderer.send('sys-api-message', { type:'openExternalUrl',data:{path:'http://local.miniapp.cn/platform/document',type:'url'} });

}

</script>
<style scoped>
.app-header-box {
	width: 100%;
	height: 60px;
	display: flex;
	/* flex-direction: column; */
	align-items: center;
	background-color: #E6E6E6;

	.app-header-box_col {
		margin: 0 5px;
		padding: 5px 10px;
		cursor: pointer;
		font-size: 12px;
		color: #030303;
		text-align: center;
		border-radius: 5px;
		-webkit-user-select: none;
		img {
			width: 16px;
			height: 16px;
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			margin-bottom: 3px;
		}
	}

	.app-header-box_col:hover {
		background-color: #fff;
	}

	/* 去掉第三个列表项的 hover 效果 */
	/* .app-header-box_col:nth-child(3):hover,
	.app-header-box_col:nth-child(5):hover {
		background-color: transparent; */
		/* 或者使用初始背景色 */
	/* 	cursor: default;
	} */
}
</style>